<template>
  <div class="addEditDialog">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%" @close="closeDialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormref" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="roleName" label="角色名称:">
          <el-input v-model="ruleForm.roleName" clearable placeholder="请输入角色名称">
            
          </el-input>
         
        </el-form-item>
         <el-form-item prop="statusEnum" label="角色状态：">
             <el-select v-model="ruleForm.statusEnum" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.statusEnum"
                :label="item.label"
                :value="item.statusEnum">
              </el-option>
            </el-select>        
        </el-form-item>  
         <el-form-item prop="remark"  label="备注" >           
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>        
        </el-form-item>              
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleFormref')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'showImg',
  data () {
    return {
     url:'',
      ruleForm: {
          id:null,
          version:null,
          roleId:null,
          roleName:null,
          statusEnum:null,
          remark:null          
        },   
      dialogVisible: false,           
      rules: {
        roleName: [
          { required: true, message: '不能为空', trigger: 'blur'}         
        ],
        statusEnum: [
          { required: true, message: '不能为空', trigger: 'change'}        
        ],       
      },
       options: [{
          statusEnum: '0',
          label: '正常'
        }, {
          statusEnum: '1',
          label: '停用'
        }],
    }
  },
  methods: { 
    closeDialog(){
      this.dialogVisible=false;
    },
    loadDialogData(item,title,url){
      this.dialogVisible=true;   
       setTimeout(() => {
          this.title=title;
          this.url=url;            
          this.$refs['ruleFormref'].resetFields(); //重置  弹窗数据                 
          this.ruleForm.roleId=item.roleId;
          this.ruleForm.id=item.id;
          this.ruleForm.version=item.version;
          this.ruleForm.roleName=item.roleName;
          if(item.statusEnum=='NORMAL'){
             this.ruleForm.statusEnum='0';
          }else if(item.statusEnum=='FORBID'){
            this.ruleForm.statusEnum='1';
          }else{
            this.ruleForm.statusEnum=null;
          }
          this.ruleForm.remark=item.remark; 

        }, 10); 
     

    },
    submitForm(formName) {     
     
        this.$refs[formName].validate((valid) => {
          if (valid){     
              this.$store.dispatch('postform',{param:this.ruleForm,url:this.url})
              .then(() => {
                if(this.addEdit.code==0){
                  this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  });               
                  this.dialogVisible=false;  
                       
                  this.$emit('fatherMethod'); 
                }else{
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'warning'
                  }); 
                }              
              })
              .catch(() => {
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'error'
                  }); 
                 
              })                        
          } else {            
            return false;
          }
        });
      },
  
  },
  computed:{
    
    ...mapState(['list','addEdit'])
  },
  mounted(){   
      
        
  }
}
</script>

<style scoped>
.addEditDialog .el-select{
  width: 100%
}

</style>
<style>
  
</style>
